<template>
    <div class="table-all">
        <!-- 搜索区 -->
        <div class="app-container search-box">
            <SearchForm
                :form="searchData.form"
                :options="searchData.options"
                @searchUpdate="searchUpdate"
                @resetSearchData="resetSearchData"
            ></SearchForm>
        </div>
        <!-- 按钮区 -->
        <div class="app-container table-box">
            <div class="table-main">
                <!-- 表格 -->
                <v-table
                v-if="tableMainHeight>0"
                :table-columns="tableColumns"
                :table-data="tableData"
                :is-index="true"
                ref="table"
                :maxHeight="tableMainHeight"
                title="示例标题"
                >
                    <template #topButtonList>
                        <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
                    </template>
                    <template #operation="scope">
                        <i v-hasPermission="['example:update']" class="el-icon-edit-outline table-operation" style="color: #4E89EF;"
                        @click="handleEdit(scope.row)"></i>
                        <i v-hasPermission="['example:delete']" class="el-icon-delete table-operation" style="color: #ED6F6F;"
                        @click="singleDelete(scope.row)"></i>
                    </template>
                </v-table>
            </div>
            <div class="table-page">
                <!-- 页码 -->
                <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="this.getData"/>
            </div>
        </div>
        
        <!-- 详情 -->
        <detailDialog 
            v-if="detailDialogShow" 
            @closeDialog="closeDialog" 
            :areaTreeOptions="areaTreeOptions">
        </detailDialog>
    </div>
</template>

<script>
import SearchForm from '@/components/searchForm/index'
import ButtonForm from '@/components/ButtonForm/index'
import VTable from '@/components/VTable/index'
import Pagination from '@/components/Pagination/index'
import detailDialog from './detail.vue'
import {getAreaTree} from '@/api/system/area'
export default {
    components:{
        VTable,Pagination,detailDialog,SearchForm,ButtonForm
    },
    data(){
        return{
            sexList:[],
            tableColumns:[
                {
                    prop: 'name',
                    label: '名字',
                    minWidth: '150',
                    slotname: 'name',
                    options: {}
                },
                {
                    prop: 'aa',
                    label: '示例1',
                    minWidth: '150',
                    slotname: 'aa',
                    options: {}
                },
                {
                    prop: 'bb',
                    label: '示例2',
                    minWidth: '150',
                    slotname: 'bb',
                    options: {}
                },
                {
                    prop: 'cc',
                    label: '示例3',
                    minWidth: '150',
                    slotname: 'cc',
                    options: {}
                },
                {
                    prop: 'operation',
                    label: '操作',
                    width: '200',
                    align: 'center',
                    slotname: 'operation',
                    overflow: false,
                    fixed: 'right'
                }
            ],
            tableData:[
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
                {name:'xxx',aa:'11',bb:'111',cc:'333'},
            ],
            total:1,
            pageNum:1,
            pageSize:10,
            detailDialogShow:false,
            searchData:{
                form:{
                    name:'',
                    select:'',
                    date:'',
                    daterange:'',
                    areaCode: [],
                },
                options:[
                     {
                        title:'名字',
                        key: "name",
                        type: "text",
                    },
                    {
                        title: "性别",
                        key: "select",
                        type: "select",
                        multiple:false,
                        option: {
                            data: [
                                {
                                    id: 1,
                                    label: "女",
                                    value: 0,
                                },
                                {
                                    id: 2,
                                    label: "男",
                                    value: 1,
                                },
                            ],
                            props: {
                                key: "id", // 指定key对应data的字段
                                label: "label", // 指定label对应data的字段
                                value: "value", // 指定value对应data的字段
                            },
                        },
                    },
                    {
                        title: "日期",
                        key: "date",
                        type: "date",
                    },
                    {
                        title: "日期范围",
                        key: "daterange",
                        type: "date-to-date",
                    },
                    {
                        title: "区域",
                        key: "areaCode",
                        type: "gdAreaSelect",
                        changeFn: this.searchAreacodeHandle, //如需对区域数据做更多的处理，可在这里定义方法
                    },
                ]
            },
            buttonList:[
                {name:'新增',methods:'toAdd',type:'primary'},
                {name:'导入',methods:'toImport',},
                {name:'导出',methods:'toImport',}
            ],
            tableMainHeight: 0,
            areaTreeOptions:[],
        }
    },
    methods:{
        toAdd(){
            console.log('add')
        },
        toImport(){
            console.log('import')
        },
        // 执行搜索
        searchUpdate(){
            console.log('searchUpdate',this.searchData.form)
        },
        // 重置搜索条件
        resetSearchData(){
            this.searchData.form = {
                 name:'',
                select:'',
                date:'',
                daterange:''
            }
        },
        handleEdit(){
            this.detailDialogShow = true
        },
        closeDialog(){
             this.detailDialogShow = false
        },
        getData(){

        },
        singleDelete(){

        },
        // 触发按钮区域按钮方法
        clickButton(methods){
            this[methods]()
        },
        getAreaTreeInfo(){
            getAreaTree({parentCode:"440000000000"}).then(res=>{
                if(res.code==200){
                    this.areaTreeOptions = res.data
                    this.areaTreeOptions.forEach(t=>{
                        this.areaTreeList.push(t)
                        this.getAreaTreeList(t)
                    })
                }
            })
        },
        searchAreacodeHandle(arr){
            console.log(arr)
        }
    },
    created(){
        this.$commonJs.getAllDataDictionary()   
        this.$commonJs.filterDataDict('sex',this.sexList)  
        this.getAreaTreeInfo()
    },
    mounted(){
        this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
    }
}
</script>

<style lang="scss" scoped>

</style>